import React, { Component } from 'react'
import { NavBar, Icon } from "antd-mobile"
import "./Chat.scss"
import mgChatImg01 from "../../assets/images/mgChatImg01.jpg"
import mgChatImg02 from "../../assets/images/mgChatImg02.jpg"
import mgChatImg03 from "../../assets/images/mgChatImg03.jpg"
export default class Chat extends Component {
    state = {
        chatMsgList: [
            { id: 1, chatMsgName: "WIS小希", chatMsgTime: "20分钟前", chatMsgTip: "在吗", chatMsgImg: mgChatImg03 },
            { id: 2, chatMsgName: "大琳erdarling", chatMsgTime: "37分钟前", chatMsgTip: "你好，请问有什么可以帮到你", chatMsgImg: mgChatImg01 },
            { id: 3, chatMsgName: "喵小姐", chatMsgTime: "30分钟前", chatMsgTip: "", chatMsgImg: mgChatImg02 },
        ]
    }
    GotoWeChat=(e) => {
        console.log(e.target.getAttribute("data-index"))
        let chatId = e.target.getAttribute("data-index")
        this.props.history.push("./weChat/" + chatId )

        
    }
    
    render() {
        return (
            <div className="mgChat">
                <div className="mgChatTop">
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    > 聊天</NavBar>
                </div>
                <div className="mgChatContent">
                    {
                        this.state.chatMsgList.map((v) => {
                            return <div className="chatConList" key={v.id} onClick={this.GotoWeChat}>
                                <div className="chatConListL">
                                    <div className="chatConLImg" data-index={v.id}>
                                        <img src={v.chatMsgImg} alt="" data-index={v.id}></img>
                                    </div>
                                </div>
                                <div className="chatConListR" data-index={v.id}>
                                    <p className="chatConRTit" data-index={v.id}>
                                        <span className="conRTitName" data-index={v.id}>
                                            {v.chatMsgName}
                                        </span>
                                        <span className="conRTitTIme" data-index={v.id}>
                                            {v.chatMsgTime} 
                                        </span>
                                    </p>
                                    <p className="chatConRMsg" data-index={v.id}>
                                        {v.chatMsgTip}
                                    </p>
                                </div>
                            </div>
                        })
                    }

                </div>
                <div className="mgChatBottom">
                    正在加载数据
                </div>


            </div>
        )
    }
}
